import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:shop/test/widget/flutter_page_indicator.dart';

//各种样式的轮播图展示
class SwiperScreen extends StatefulWidget {
  @override
  SwiperScreenState createState() => SwiperScreenState();
}

class SwiperScreenState extends State<SwiperScreen> {
  List<String> _imageUrl = List();

  @override
  void initState() {
    super.initState();
    _imageUrl
      ..add(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588243693465&di=3e9d0b79292d568ce9dd764d59f2d9c8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F22%2F20180922230455_VZhYu.thumb.700_0.jpeg')
      ..add(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588243693462&di=f38f317ddbcea8fa24f231c26998ba2a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201812%2F11%2F20181211124113_aufgg.thumb.700_0.jpg')
      ..add(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588243693461&di=f6fd2d93a66092844f272ffe962338dc&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F06%2F20181006165241_lkjnc.jpg')
      ..add(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588243954619&di=984c80b5d335b94b7e7cc0844b021db9&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fa8559979a83e524f35d9ae72ab4d89103dcecc05.png');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text(
              '轮播图',
              style: TextStyle(fontSize: 16, color: Colors.white),
            ),
            leading: Theme
                .of(context)
                .platform == TargetPlatform.android
                ? IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.pop(context),
            )
                : IconButton(
              icon: Icon(Icons.arrow_back_ios),
              onPressed: () => Navigator.pop(context),
            )
        ),
        body: ListView(
          children: <Widget>[
            swiperViewOne(context, _imageUrl),
            swiperViewTwo(context, _imageUrl),
            swiperViewThree(context, _imageUrl),
            swiperViewFive(context, _imageUrl),
            swiperViewSix(context, _imageUrl),
            swiperViewSeven(context, _imageUrl),
            swiperViewEight(context, _imageUrl),
            swiperViewNine(context, _imageUrl),
            swiperViewTen(context, _imageUrl),
          ],
        ));
  }
}

//基本样式点
Widget swiperViewOne(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.cover,
        );
      },
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDelay: 5000,
      autoplayDisableOnInteraction: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.fromLTRB(0.0, 0.0, 20.0, 10.0),
          builder: DotSwiperPaginationBuilder(
              color: Colors.black54, activeColor: Colors.white)),
      onTap: (index) => debugPrint('点击了第$index个'),
    ),
  );
}

//基本样式点加间距
Widget swiperViewTwo(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.cover,
        );
      },
      controller: SwiperController(),
      scrollDirection: Axis.horizontal,
      autoplay: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.white70,
              activeColor: Colors.redAccent,
              //点与点之间的距离
              space: 20,
              //当前点的大小
              activeSize: 20)),
    ),
  );
}

//分数显示的图片
Widget swiperViewThree(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.fitWidth,
        );
      },
      controller: SwiperController(),
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDisableOnInteraction: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
          builder: FractionPaginationBuilder(
              color: Colors.white70,
              activeColor: Colors.redAccent,
              //选中图片分子的大小
              activeFontSize: 40,
              //总图片的分母大小
              fontSize: 20)),
    ),
  );
}

//完全自定义标记图片显示位置
//Widget swiperViewFour(BuildContext context, List<String> images){
//  return Container(
//    width: MediaQuery.of(context).size.width,
//    height: 300,
//
//    child: Swiper(
//      itemCount: images.length,
//      itemBuilder: (context, index){
//        return Image.network(images[index], fit: BoxFit.fill,);
//      },
//      controller: SwiperController(),
//      scrollDirection: Axis.horizontal,
//      autoplay: true,
//      pagination: SwiperPagination(
//          builder:
//      ),
//    ),
//  );
//}

//圆角卡片显示轮播图
Widget swiperViewFive(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width - 50,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        //圆角卡片样式
        return Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(images[index]), fit: BoxFit.cover),
              borderRadius: BorderRadius.all(Radius.circular(10))),
        );
      },
      controller: SwiperController(),
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDisableOnInteraction: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.white70,
              activeColor: Colors.redAccent,
              //点与点之间的距离
              space: 5,
              //当前点的大小
              activeSize: 20)),
    ),
  );
}

//叠加显示轮播图
Widget swiperViewSix(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemWidth: MediaQuery.of(context).size.width * 4 / 5,
      itemHeight: 200,
      itemCount: images.length,
      itemBuilder: (context, index) {
        //圆角卡片样式
        return Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(images[index]), fit: BoxFit.cover),
              borderRadius: BorderRadius.all(Radius.circular(10))),
        );
      },
      layout: SwiperLayout.STACK,
      controller: SwiperController(),
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDisableOnInteraction: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.fromLTRB(0, 0, 50, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.white70,
              activeColor: Colors.redAccent,
              //点与点之间的距离
              space: 2,
              //点的大小
              size: 10,
              //当前点的大小
              activeSize: 10)),
    ),
  );
}

//自定义显示样式
Widget swiperViewSeven(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemWidth: MediaQuery.of(context).size.width / 5 * 4,
      itemHeight: 200,
      itemCount: images.length,
      itemBuilder: (context, index) {
        //圆角卡片样式
        return Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(images[index]), fit: BoxFit.cover),
              borderRadius: BorderRadius.all(Radius.circular(10))),
        );
      },
      layout: SwiperLayout.CUSTOM,
      customLayoutOption: CustomLayoutOption(
              startIndex: -1, stateCount: images.length - 1)
          .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate(
              [Offset(-370.0, -40.0), Offset(0.0, 0.0), Offset(370.0, -40.0)]),
      controller: SwiperController(),
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDisableOnInteraction: true,
      pagination: SwiperPagination(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.all(20.0),
          builder: DotSwiperPaginationBuilder(
              color: Colors.white70,
              activeColor: Colors.redAccent,
              //点与点之间的距离
              space: 5,
              //当前点的大小
              activeSize: 15)),
    ),
  );
}

//左右有边距的类3D轮播
Widget swiperViewEight(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.cover,
        );
      },
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDelay: 5000,
      autoplayDisableOnInteraction: true,
      //一张图占据屏幕的比例
      viewportFraction: 0.8,
      //两边图片的缩放比例
      scale: 0.8,
      onTap: (index) => debugPrint('点击了第$index个'),
    ),
  );
}

//自定义指示器的轮播图
Widget swiperViewNine(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.cover,
        );
      },
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDelay: 5000,
      autoplayDisableOnInteraction: true,
      pagination: SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config){
        return Container(
          alignment: Alignment.bottomCenter,
          height: 180,
          child: PageIndicator(
            layout: PageIndicatorLayout.NIO,
            size: 10,
            space: 5,
            count: images.length,
            controller: config.pageController,
            color: Colors.redAccent,
          ),
        );
      }),
      onTap: (index) => debugPrint('点击了第$index个'),
    ),
  );
}

//轮播图显示左右箭头显示
Widget swiperViewTen(BuildContext context, List<String> images) {
  return Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 0, 50),
    width: MediaQuery.of(context).size.width,
    height: 200,
    child: Swiper(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return Image.network(
          images[index],
          fit: BoxFit.cover,
        );
      },
      scrollDirection: Axis.horizontal,
      autoplay: true,
      autoplayDelay: 5000,
      autoplayDisableOnInteraction: true,
      //显示一个左右箭头的指示器
      control: SwiperControl(),
      onTap: (index) => debugPrint('点击了第$index个'),
    ),
  );
}
